<template>
  <div class="login">
    <div class="login1" style="height:90%">
      <div class="login2">
        <img src="../../assets/image/logo.png">
        <div class="login8">欢迎注册美食校园美食分享平台</div>
      </div>
      <div class="login3">
        <div class="login4">
          <el-input style="margin-top:30px" prefix-icon="el-icon-user-solid" v-model="loginAccount" placeholder="请输入用户账号"></el-input>
          <el-input style="margin-top:30px" prefix-icon="el-icon-s-custom" v-model="username" placeholder="请输入用户昵称"></el-input>
          <el-input style="margin-top:30px" prefix-icon="el-icon-s-promotion" v-model="email" placeholder="请输入用户邮箱"></el-input>
          <el-input style="margin-top:30px" prefix-icon="el-icon-phone" v-model="tel" placeholder="请输入联系电话"></el-input>
          <el-select style="margin-top:30px" v-model="schoolId" placeholder="请选择学校">
            <el-option
              v-for="(item,index) in school"
              :key="index"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-input style="margin-top:30px" prefix-icon="el-icon-arrow-right" type="password" v-model="password" placeholder="请输入用户密码"></el-input>
          <div class="login5">
            <div @click="toLogin">登录？</div>
            <div @click="toForget">忘记密码？</div>
          </div>
          <div class="login6">
            <div class="login7" @click="saveUser">
              注 册
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {saveUser,getFoodSchoolList} from '../../api/api' 
  export default {
    data() {
      return{
        school: [],
        schoolId: "",
        loginAccount: "",
        username: '',
        password: '',
        email: "",
        tel: "",
      }
    },
    methods: {
        getFoodSchoolList() {
          getFoodSchoolList().then(res => {
            if (res.code == 1000) {
              this.school = res.data
            }
          })
        },
        toLogin() {
            this.$router.push("/login")
        },
        toForget() {
            this.$router.push("/forget")
        },
        saveUser() {
          if(!this.loginAccount) {
              this.$message({
                  message: '请输入登录账号',
                  type: 'warning'
              });
              return;
          }
          if(!this.password) {
              this.$message({
                  message: '请输入密码',
                  type: 'warning'
              });
              return;
          }
          if(!this.username) {
              this.$message({
                  message: '请输入用户名',
                  type: 'warning'
              });
              return;
          }
          if(!this.email) {
            this.$message({
                message: '请输入邮箱',
                type: 'warning'
            });
            return;
          }
          var regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // 邮箱正则表达式
          if (!regex.test(this.email)) {
              this.$message({
                  message: '请输入正确的邮箱格式',
                  type: 'warning'
              });
              return;
          }
          if(!this.tel) {
              this.$message({
                  message: '请输入联系方式',
                  type: 'warning'
              });
              return;
          }
          if(!this.schoolId) {
              this.$message({
                  message: '请选择学校',
                  type: 'warning'
              });
              return;
          }
          var param = {
              loginAccount: this.loginAccount,
              password: this.password,
              userName: this.username,
              userType: 1,
              email: this.email,
              tel: this.tel,
              schoolId: this.schoolId,
          }
          saveUser(param).then(res => {
              if (res.code == 1000) {
                  this.$message({
                      message: '注册成功,正在前往登录页...',
                      type: 'success'
                  });
                  var that = this
                  setTimeout(function() {
                      that.$router.push("/login")
                  },500)
              } else {
                  this.$message({
                      message: res.message,
                      type: 'warning'
                  });
              }
          })
        }
    },
    created() {
     
    },
    mounted() {
      this.getFoodSchoolList()
    }
 }
</script>

<style scoped>
@import url('../../assets/css/login.css');
.login4>>>.el-input__inner {
  -webkit-appearance: none;
  background-color: #EEF0F3;
  background-image: none;
  border-radius: 4px;
  border: 0;
  width: 100%;
  font-family: '黑体';
}
</style>